
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico"> 
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">

 <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">

     <link rel="stylesheet" href="__STATIC__/layout/css/channel.css" type="text/css">
     <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/sc/js/page.js"></script>
</head>

<body style="color:#333;padding:3px;">
    <!-- 标题 -->
    <div class="page-heade">
      <h2 class="title_color text-center">部门日常费用报销申请查询</h2>
    </div>
    <!-- 标题 -->
    <div class="">
   <form action="#" id="f1" class="form-inline formpage" method="post">
      <input type="hidden" value='{$page}' name="page" id="page-go"/>
                      <input type="hidden" value='{$list}' name="list" id="list-go"/>
     <table class="table-bordered table" style="margin-bottom: 0;border-bottom: 0">
          <tr>
            <td style="min-width: 180px;width: 180px;border-bottom: 0"><label for="" class="form-label" >报销单号：</label></td>
            <td style="border-bottom: 0"><input type="text" class="form-control" style="width: min-width:140px;width: 140px;" name="no" value="{$data.no}"> <button type="button" style="float: right;" class="showOrHide btn-info btn">展开查询条件</button></td>
           </tr>
      </table>
      <table class="table-bordered table t_table" style="display: none;">
           <tr>
            <td style="min-width: 180px;width: 180px"><label for="" >状态：</label></td>
            <td>
               <select name="st" class="form-control select">
                            <option value="0">请选择</option>
                        {volist name="state" id="s"}
                            {if $s.id==$data.st}
                            <option value="{$s.id}" selected>{$s.title}</option>
                            {else/}
                            <option value="{$s.id}">{$s.title}</option>
                            {/if}
                        {/volist}
                </select>
            </td>
           </tr>
            <tr>
            <td style="min-width: 180px;width: 180px"><label for="" >主题：</label></td>
            <td><input type="text" class="form-control" style="min-width: 220px;width: 220px" name="title" value="{$data.title}"></td>
           </tr>
            <tr>
           <td style="min-width: 180px;width: 180px"><label for="" >创建时间：</label></td>
         <td>
             <div class="form-group">
            <input type="text" id="start" placeholder="开始日期" class="form-control layer-date " style="width: 120px;display: inline-block;" name="start" value="{$data.start}">
           </div>
            <div class="form-group">
                至
            </div>
           <div class="form-group">
            <input type="text" class="form-control layer-date"  placeholder="结束日期" style="display: inline-block;width: 120px;" id="end" name="end" value="{$data.end}">
           </div>
            </td>
           </tr>
             <tr>
            <td  style="min-width: 180px;width: 180px"><label for="">部门：</label></td>
            <td>
                <div class="col-xs-4">
                        <div class="input-group" id="" >
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="dep"  value="">
                            <input type="hidden" name="deps" id="deps" value="{$data.deps}"/>
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <button class="btn btn-primary btn-sm" type="button" id="select_dep">选择</button>
                    </div>
            </td>
           </tr>
            <tr>
            <td  style="min-width: 180px;width: 180px">已选择的部门</td>
            <td>
                 <div class="duoxuan" id="selected_dep">
                  
                       {volist name="$data.deparr" id="d"}
                                <span class="ren deplist" data-id="{$d.id}">{$d.de_name}<span class="close">×</span></span>
                        {/volist}
                
                    </div>
                  
            </td>
           </tr>
             <tr>
            <td style="min-width: 180px;width: 180px"><label for="">申请人：</label></td>
           <td> <div class="col-xs-4">
                        <div class="input-group" id="" >
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="shen"  value="">
                            <input type="hidden" name="shens" id="shens" value="{$data.shens}"/>
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <button class="btn btn-primary btn-sm" type="button" id="select_shen">选择</button>
                    </div>
            </td>
           </tr>
             <tr>
            <td  style="min-width: 180px;width: 180px">已选择的申请人</td>
            <td>
                <div class="duoxuan" id="selected_shen">
                       {volist name="$data.shenarr" id="d"}
                                <span class="ren shoulist" data-id="{$d.id}">{$d.em_name}<span class="close">×</span></span>
                        {/volist}
                         
                    </div>
                        
            </td>
           </tr>
             <tr>
            <td style="min-width: 180px;width: 180px"><label for="">收款人：</label></td>
           <td><div class="col-xs-4">
                        <div class="input-group" id="" >
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="shou"  value="">
                            <input type="hidden" name="shous" id="shous" value="{$data.shous}"/>
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <button class="btn btn-primary btn-sm" type="button" id="select_shou">选择</button>
                    </div>
            </td>
           </tr>
             <tr>
            <td  style="min-width: 180px;width: 180px">已选择的收款人</td>
            <td>
                 <div class="duoxuan" id="selected_shou">
                       {volist name="$data.shouarr" id="d"}
                                <span class="ren shoulist" data-id="{$d.id}">{$d.em_name}<span class="close">×</span></span>
                         {/volist}
                    </div>
            </td>
           </tr>
            <tr>
            <td  style="min-width: 180px;width: 180px"><label for="">是否已支付：</label></td>
            <td>
              <select name="iszhifu" id="" class="form-control select">
                  <option value="0" {if $data.iszhifu==0} selected {/if}>请选择</option>
                  <option value="1" {if $data.iszhifu==1} selected {/if}>已支付</option>
                  <option value="2" {if $data.iszhifu==2} selected {/if}>未支付</option>
              </select>
            </td>
           </tr>
      </table>
      <table class="table table-bordered">
       <tr>
      <td colspan="2" class="text-center" style="border-top:0 ">
            
                       <button class="btn-sm btn-info btn" type="button" id="check">查询</button><span class="lr_5"></span><button class="btn-sm btn-info btn" type="button" id="clear_check">清空查询条件</button>  
                   
      </td>
          </tr>
      </table>
    
      <table class="table table-striped table-bordered table-hover bud_hei text-center">
        <tr class="info">
            <th class="text-center">序号</th>
            <th class="text-center">报销单号</th>
            <th class="text-center">主题</th>
            <th class="text-center">部门/申请人(代办人)</th>
            <th class="text-center">收款人</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">是否已支付</th>
            <th class="text-center">已支付金额</th>
            <th class="text-center">应支付金额(元)</th>
            <th class="text-center">状态</th>
            <th class="text-center">操作</th>
        </tr>
        {volist name="apply" id="vo"}
        <tr>
          <td>{$i}</td>
          <td><a class="J_menuItem detail" title="{$vo.no}" href="{:url('Richangbaoxiao/detail')}?aid={$vo.id}">{$vo.no}</a></td>
          <td class="text-left">{if $vo.state==7}<b>{/if} {$vo.title} {if $vo.state==7}</b><span class="glyphicon glyphicon-ok duigou" title="已生效" aria-hidden="true"></span>{/if}</td>
          <td>{$vo.de_name}/{$vo.cman}</td>
          <td>{$vo.bman}</td>
          <td>{$vo.ctime}</td>
          <td>{if $vo.iszhifu==1}是{else/}否{/if}</td>
          <td class="text-right ObjectNum">{$vo.zhifujin}</td>
          <td class="text-right ObjectNum">{$vo.pizhunjin}</td>
          <td class="text-left">{$vo.statename}</td>
          <td><a href="javascript:;">流程图</a></td>
        </tr>
        {/volist}
        </table>
        <h5 class="text-center" id="pagesc" style="font-size: 16px;font-weight: 500">
            <script>
                            $(function(){
                                pageSC("pagesc",{$sum},{$page},{$maxpage})
                            })
                        </script>
                        每页显示
           <select id="pagesize">
                        <option value='10' {if condition="$list eq 10"}selected{/if}>10条</option>
                        <option value='20'{if condition="$list eq 20"}selected{/if}>20条</option>
                        <option value='40'{if condition="$list eq 40"}selected{/if}>40条</option>

            </select>
        </h5>
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>

<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!--统计代码，可删除-->
    <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
        <script src="__STATIC__/layout/js/common.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
        <script type="text/javascript">
         $('body').on('click','.duoxuan .close',function () {
            $(this).closest('.ren').remove()
          })
          //申请人搜索自动补全
          $("#shou").bsSuggest({
              url: "{:url('userjson')}",
              /*effectiveFields: ["userName", "shortAccount"],
               searchFields: [ "shortAccount"],*/
              effectiveFieldsAlias:{title: "名称"},
              ignorecase: true,
              showHeader: true,
              showBtn: false,     //不显示下拉按钮
              delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
              idField: "id",
              keyField: "title",
              clearable: true
          }).on('onSetSelectValue', function (e, keyword, data) {
              $(this).val('')
              var bool = false
              $('#selected_shou .ren').each(function (idx,o) {
                  if($(this).data('id') == keyword.id){
                      bool = true;
                  }
              })
              if(bool == false){
                  $('#selected_shou').append('<span class="ren shoulist" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>');
                  
              }
          });
            $('#select_shou').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("selectshou")}'
                })
                return  false
        })
          //申请人搜索自动补全
          $("#shen").bsSuggest({
              url: "{:url('userjson')}",
              /*effectiveFields: ["userName", "shortAccount"],
               searchFields: [ "shortAccount"],*/
              effectiveFieldsAlias:{title: "名称"},
              ignorecase: true,
              showHeader: true,
              showBtn: false,     //不显示下拉按钮
              delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
              idField: "id",
              keyField: "title",
              clearable: true
          }).on('onSetSelectValue', function (e, keyword, data) {
              $(this).val('')
              var bool = false
              $('#selected_shen .ren').each(function (idx,o) {
                  if($(this).data('id') == keyword.id){
                      bool = true;
                  }
              })
              if(bool == false){
                  $('#selected_shen').append('<span class="ren shenlist" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>');
                  
              }
          });
           $('#select_shen').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("selectshen")}'
                })
                return  false
        })

        $('#select_dep').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("selectdep")}'
                })
                return  false
        })
            //部门搜索自动补全
          $("#dep").bsSuggest({
              url: "{:url('depjson')}",
              /*effectiveFields: ["userName", "shortAccount"],
               searchFields: [ "shortAccount"],*/
              effectiveFieldsAlias:{title: "名称"},
              ignorecase: true,
              showHeader: true,
              showBtn: false,     //不显示下拉按钮
              delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
              idField: "id",
              keyField: "title",
              clearable: true
          }).on('onSetSelectValue', function (e, keyword, data) {
              $(this).val('')
              var bool = false
              $('#selected_dep .ren').each(function (idx,o) {
                  if($(this).data('id') == keyword.id){
                      bool = true;
                  }
              })
              if(bool == false){
                  $('#selected_dep').append('<span class="ren deplist" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>');
                  
              }
          });


        </script>
    <script>
//翻页
        function tijiaoyanzheng(){
          var dep=[];
          $(".deplist").each(function(){
              dep.push($(this).attr("data-id"));
          })
          $("#deps").val(dep.join(',')); 
           var shou=[];
          $(".shoulist").each(function(){
              shou.push($(this).attr("data-id"));
          })
          $("#shous").val(shou.join(',')); 
           var shen=[];
          $(".shenlist").each(function(){
              shen.push($(this).attr("data-id"));
          })
          $("#shens").val(shen.join(',')); 
        }
      
        function changePage(val){
             $("#page-go").val(val);
        }
       
        $("#check").click(function(){
              $("#page-go").val(1);
              tijiaoyanzheng();
              $(".formpage").submit();
        })
        $("#clear_check").click(function(){
            $("input[type='text']").val("");
            $("select").val(0);
            $("#page-go").val(1);
            $("#deps").val("")
            $("#shous").val("")
            $("#shens").val("")
            $(".formpage").submit();
        })
        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD',
            //min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD',
           // min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);

          /*显示或展开查询条件*/
        $(".showOrHide").click(function(){
          var str = $(this).html()
        
          /*console.log(tr)*/
        if(str=="展开查询条件"){
            $(".t_table").show();
            $(this).html("隐藏查询条件")
          }else{
            $(".t_table").hide();
            $(this).html("展开查询条件")
          }
        })
             $(document).ready(function(){
            var $ObjectNum =$(".ObjectNum");
               toNum($ObjectNum);
        })
         $(document).ready(function () {

        $('#reset').on('click',function () {
            $("#form1 input").each(function(){
                $(this).val('');
            });
            $("#form1 select").each(function(){
                $(this).val('');
            });
            $('#form1').submit()
            return false
        })
    })   
    </script>


<script>
    $(".detail").click(menuItem);
    function menuItem() {
    // 获取标识数据
    var dataUrl = $(this).attr('href'),
        dataIndex = $(this).data('index'),
        menuName = $.trim($(this).attr("title")),
        flag = true;
    if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;

    // 选项卡菜单已存在
    top.$('.J_menuTab').each(function () {
        if ($(this).data('id') == dataUrl) {
            if (!$(this).hasClass('active')) {
                $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                scrollToTab(this);
                // 显示tab对应的内容区
                top.$('.J_mainContent .J_iframe').each(function () {
                    if (top.$(this).data('id') == dataUrl) {
                        top.$(this).show().siblings('.J_iframe').hide();
                        return false;
                    }
                });
            }
            flag = false;
            return false;
        }
    });

    // 选项卡菜单不存在
    if (flag) {
        var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
        top.$('.J_menuTab').removeClass('active');

        // 添加选项卡对应的iframe
        var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
        top.$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);

        //显示loading提示
//            var loading = layer.load();
//
//            $('.J_mainContent iframe:visible').load(function () {
//                //iframe加载完成后隐藏loading提示
//                layer.close(loading);
//            });
        // 添加选项卡
        top.$('.J_menuTabs .page-tabs-content').append(str);
        scrollToTab(top.$('.J_menuTab.active'));
    }
    return false;
}
//滚动到指定选项卡
function scrollToTab(element) {
    var marginLeftVal = calSumWidth(top.$(element).prevAll()), marginRightVal = calSumWidth(top.$(element).nextAll());
    // 可视区域非tab宽度
    var tabOuterWidth = calSumWidth(top.$(".content-tabs").children().not(".J_menuTabs"));
    //可视区域tab宽度
    var visibleWidth = top.$(".content-tabs").outerWidth(true) - tabOuterWidth;
    //实际滚动宽度
    var scrollVal = 0;
    if (top.$(".page-tabs-content").outerWidth() < visibleWidth) {
        scrollVal = 0;
    } else if (marginRightVal <= (visibleWidth - top.$(element).outerWidth(true) - top.$(element).next().outerWidth(true))) {
        if ((visibleWidth - top.$(element).next().outerWidth(true)) > marginRightVal) {
            scrollVal = marginLeftVal;
            var tabElement = element;
            while ((scrollVal - top.$(tabElement).outerWidth()) > (top.$(".page-tabs-content").outerWidth() - visibleWidth)) {
                scrollVal -= top.$(tabElement).prev().outerWidth();
                tabElement = top.$(tabElement).prev();
            }
        }
    } else if (marginLeftVal > (visibleWidth - top.$(element).outerWidth(true) - top.$(element).prev().outerWidth(true))) {
        scrollVal = marginLeftVal - top.$(element).prev().outerWidth(true);
    }
    top.$('.page-tabs-content').animate({
        marginLeft: 0 - scrollVal + 'px'
    }, "fast");
}
//计算元素集合的总宽度
function calSumWidth(elements) {
    var width = 0;
    top.$(elements).each(function () {
        width += top.$(this).outerWidth(true);
    });
    return width;
}


    </script>
</body>

</html>